<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="admin/common/frame :: head(~{::title},~{::link},~{})">
    <title>登录</title>
    <link rel="stylesheet" th:href="@{/static/css/login.css}">
</head>
<body>
<header>
    <h3>人民大食堂管理系统</h3>
</header>
<article>
    <!-- 左侧 -->
    <div class="image">
        <img th:src="@{/static/img/login-background.png}">
    </div>
    <!-- 右侧 -->
    <div class="form">
        <form th:action="@{/admin/login}" method="post">
            <header>用户名密码登录</header>
            <span class="text-danger small text-center" th:text="${error}" th:if="${error}"></span>
            <!-- 用户名 -->
            <div class="form-item">
                <i class="fa fa-user-circle-o"></i>
                <input name='username' type="text" placeholder="请输入用户名">
            </div>
            <!-- 密码 -->
            <div class="form-item">
                <i class="fa fa-key"></i>
                <input name='password' type="password" placeholder="请输入密码">
                <i class="change-eye fa fa-eye-slash" style="font-size: 12px;"></i>
            </div>
            <!-- 登录按钮 -->
            <button type="submit" class="form-button pointer">
                登录
            </button>
        </form>
    </div>
</article>
<th:block th:include="common/scripts :: scripts"/>
<script>
    $(function () {
        $('.change-eye').click(() => {
            if ($('.change-eye').hasClass('fa-eye-slash')) {
                $('.change-eye').removeClass('fa-eye-slash')
                $('.change-eye').addClass('fa-eye')
                $('[name=password]').attr('type', 'text')
            } else {
                $('.change-eye').removeClass('fa-eye')
                $('.change-eye').addClass('fa-eye-slash')
                $('[name=password]').attr('type', 'password')
            }
        })
    })
</script>
</body>
</html>